<template>
  <!--物资管理/设备管理页面-->
  <div>
    <cus-search style="min-width: 1200px;padding-bottom: 0;">
      <cus-search-item>
        <Form ref="formValidate" :model="form" :label-width="100">
          <FormItem class="mr_48 mb_20" label="设备名称" prop="name">
            <Input
              clearable
              placeholder="请输入设备名称"
              maxlength="20"
              v-model="form.name"
              style="width: 200px"
            />
          </FormItem>
          <FormItem class="mr_48 mb_20" label="连接状态" prop="connectionStatus">
            <Select
              style="width: 200px"
              clearable
              v-model="form.connectionStatus"
              placeholder="全部"
            >
              <Option
                v-for="(item, index) in ['在线', '离线']"
                :value="item"
                :key="index"
                >{{ item }}</Option
              >
            </Select>
          </FormItem>
          <cusButton
            class="mr_20 mb_20"
            type="primary"
            v-permission="10"
            @onClick="pages.page=1;getDeviceListApi()"
            >查询</cusButton
          >
          <cusButton
            class="mr_20 mb_20"
            type="primary"
            v-permission="10"
            @onClick="reset()"
            >重置</cusButton
          >
        </Form>
      </cus-search-item>
    </cus-search>
    <cus-card class="cus_cardBox" :showTitle="false">
      <div class="btnBox">
        <cusButton type="primary" @onClick="onAdd()" style="width:150px;" v-permission="20"
          >添加</cusButton
        >
      </div>
      <cusTable
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page']"
      >
        <template slot-scope="{ row }" slot="connectStateOperation">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <div
              style="
                width: 8px;
                height: 8px;
                border-radius: 100%;
                margin-right: 6px;
              "
              :style="{
                background: row.connectionStatus == '在线' ? '#03AB5A' : '#666666',
              }"
            ></div>
            <div
              :style="{
                color: row.connectionStatus == '在线' ? '#03AB5A' : '#666666',
              }"
            >
              {{ row.connectionStatus }}
            </div>
          </div>
        </template>

        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 8px"
              v-permission="30"
              @onClick="onEdit(row)"
            >
              <Icon
                type="md-color-filter"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>编辑</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#FF4746' }"
              v-permission="40"
              style="padding: 0 5px; display: flex; align-items: center"
              @onClick="onDelete(row)"
            >
              <Icon type="md-trash" size="4" style="margin: 2px 5px 0 0" />
              <span>删除</span>
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div class="cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="getDeviceListApi()"
        ></cus-page>
      </div>
    </cus-card>
    <!--添加设备被信息-->
    <addDevice ref="addDevice"></addDevice>
  </div>
</template>
<script>
import { getDeviceList, deleteTouchscaleList, updateTransformDeviceStatus } from "@/api/business/manager";
import addDevice from "./components/addDevice.vue";

export default {
  components: { addDevice },
  data() {
    return {
      form: {
        loading: false,
        name: "", // 设备名
        serialNo: "", // 设备号
        connectionStatus: "", // 连接状态
      },
      ruleValidate: {}, //rule验证
      // 表头
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70,
        },
        {
          title: "设备号",
          key: "serialNo",
          align: "center",
          minWidth: 105,
        },
        {
          title: "设备名称",
          key: "name",
          align: "center",
          minWidth: 105,
        },
        {
          title: "使用部门",
          key: "useDept",
          align: "center",
          minWidth: 105,
        },
        {
          title: "IP地址",
          key: "ip",
          align: "center",
          minWidth: 135,
        },
        {
          title: "连接状态",
          slot: "connectStateOperation",
          align: "center",
          minWidth: 135,
        },
        // {
        //   title: "启用",
        //   key: "enable",
        //   align: "center",
        //   minWidth: 105,
        //   render: (h, params) => {
        //     return h("div", [
        //       h("span", {
        //         style: {
        //           background:  params.row.enable == "TRUE" ? '#19BE6B':'#ED4014',
        //           color: '#FFFFFF',
        //           padding: '5px'
        //         },
        //       }, params.row.enable == "TRUE" ? "启用" : "禁用"),
        //     ]);
        //   },
        // },
        {
          title: "操作",
          fixed: "right", // 右侧固定
          slot: "operation",
          align: "center",
          width: 245,
        },
      ],
      data: [], // 表格列表
      // 分页
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      tableHeight: 0,
    };
  },
  created() {
    this.onInit();
  },
  mounted() {
  },
  methods: {
    onInit() {
      this.getDeviceListApi();
    },
    // 重置搜索
    reset() {
      this.$refs["formValidate"].resetFields();
      this.onInit();
    },
    // 添加
    onAdd() {
      this.$refs["addDevice"].show();
    },
    // 编辑
    onEdit(row) {
      this.$refs["addDevice"].form = JSON.parse(JSON.stringify(row));
      this.$refs["addDevice"].show();
    },
    // 删除
    onDelete(row) {
      this.$cu
        .dialog({
          params: row,
        })
        .then(({ id }) => {
          this.deleteTouchscaleListApi(id);
        });
    },
    // 桌面秤列表---------------接口
    getDeviceListApi() {
      this.form.loading = true;
      return new Promise((resolve) => {
        let params = {
          name: this.form.name, //秤名
          connectionStatus: this.form.connectionStatus, //秤号
          current: this.pages.page,
          size: this.pages.pageSize,
        };
        getDeviceList(params).then((res) => {
          this.form.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
          } else {
            this.form.loading = false;
          }
          resolve();
        });
      });
    },
    // 删除桌面秤数据-------------接口
    deleteTouchscaleListApi(id) {
      return new Promise((resolve) => {
        deleteTouchscaleList({ id: id }).then((res) => {
          if (res.retCode == 2000) {
            this.$Message.success(res.retMsg);
            this.getDeviceListApi();
          }
          resolve();
        });
      });
    },
    // 启用/禁用设备------------------接口
    updateTransformDeviceStatusApi(id) {
      return new Promise((resolve) => {
        updateTransformDeviceStatus({ id: id }).then((res) => {
          if (res.retCode == 2000) {
            this.onInit();
            this.getDeviceListApi();
          }
          resolve();
        });
      });
    }
  },
};
</script>

<style lang="less" scoped>
.btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
</style>
